<template>
  <div>
    <div style="float:left;width:50%">
      <el-row type="flex">
        <el-col :span="14">
          <el-input
            placeholder="请输入搜索内容"
            v-model="search"
            clearable
            size="medium"
            @keyup.enter.native="searchData"
          >
            <template slot="prepend">
              <el-button @click="fullSelect">{{btnName}}</el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
      <el-checkbox-group v-model="posItems" size="small" @change="hanlerChange">
        <el-checkbox
          v-for="(item,index) in tabs"
          v-bind:key="index"
          :label="item.Id"
          border
          style="margin-top:20px"
          @change="optionMonPos($event,item.Id,item.Name,item.Name)"
        >{{item.Name}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div style="float:left;width:50%">
      <!-- 已经选择的内容 -->
      已经选择的数据
        <div v-for="item in monItems" :key="item.id">
          <el-button @click="monItems.splice(monItems.indexOf(item),1),posItems.splice(posItems.indexOf(item.TagId), 1)">{{item.Name}}</el-button>
        </div>

    </div>
  </div>
</template>

<script>
export default {
  props: {
    monItems: Array,
    tagId: {
      type: String,
      defalut: ''
    }
  },
  computed: {
    btnName() {
      if (this.monItemData.length == this.tabs.length) this.clearOnOff = false
      else if (this.monItemData.length === 0) this.clearOnOff = true
      return this.clearOnOff ? '全选' : '清空'
    }
  },
  data() {
    return {
      posItems: [],
      monItemData: this.monItems,
      clearOnOff: false,
      search: '',
      tempTagId: '',
      tabs: [
        //监测项目
        {
          Id: '0000-0000-0000-0001',
          Name: 'PH值'
        },
        {
          Id: '0000-0000-0000-0002',
          Name: '五日生化'
        }
      ]
    }
  },
  watch: {
    tagId() {
      // console.log('tag changed')
      this.getPosByTagID()
    }
  },
  mounted: function() {
    if (this.tagId != '') this.getPosByTagID()
  },
  methods: {
    fullSelect() {
      this.monItemData.splice(0, this.monItemData.length)
      this.posItems.splice(0, this.posItems.length)
      if (this.clearOnOff) {
        this.tabs.forEach(e =>
          this.monItemData.push({
            TagId: e.Id,
            Name: e.Name
          })
        )
        this.tabs.forEach(e => this.posItems.push(e.Id))
      } else {
        // this.monItemData.splice(0, this.monItemData.length)
      }
      this.clearOnOff = !this.clearOnOff
    },
    optionMonPos(val, id, name) {
      if (val) {
        // 增加
        this.monItemData.push({
          TagId: id,
          Name: name
        })
      } else {
        // 去掉
        console.log('去掉')
        this.monItemData.forEach(e => {
          e.TagId == id
            ? this.monItemData.splice(this.monItemData.indexOf(e), 1)
            : ''
        })
        console.log(this.monItemData)
      }
    },
    hanlerChange() {
      this.$emit('update:monItems', this.monItemData)
    },
    searchData() {
      if (this.search != '') {
        console.log('search something' + this.search)
        // 搜索是
      }
    },
    getPosByTagID() {
      // console.log('调用成功' + this.tagId)
      // this.axios
      //   .get('/Project/GetMonPos', {
      //     params: { tagId: this.tagId }
      //   })
      //   .then(response => {
      //     this.tabs = response.data
      //     console.log(this.tabs)
      //   })
    }
  }
}
</script>

<style lang="stylus">
.el-button
  overflow hidden
// .el-table .cell, .el-table th div
.cell
  overflow initial !important
</style>
